{% extends 'movie/base.html' %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
  <title>电影热度分析</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <h1 style="color: white;">电影热度分布图 - 前 20 部</h1>

  <div class="buttons">
    <button onclick="window.location.href='/movie/year-count'">电影数量变化趋势</button>
    <button onclick="window.location.href='/movie/wordcloud'">词云分析</button>
    <button onclick="window.location.href='/movie/movie-hot'">电影热度</button>
      <button onclick="window.location.href='/movie/map'">分布</button>
  </div>

  <canvas id="movieHotChart"></canvas>




  <script>
    // 从 CSV 文件中读取数据
    const movieData = [
      { id: '赌侠2：上海滩赌圣', rating_number: 330 },
      { id: '两小无猜', rating_number: 318 },
      { id: '新娘大作战', rating_number: 308 },
      { id: '本杰明·巴顿奇事', rating_number: 279 },
      { id: '忌日快乐', rating_number: 278 },
      { id: '西游记女儿国', rating_number: 251 },
      { id: '许愿神龙', rating_number: 238 },
      { id: '银河写手', rating_number: 237 },
      { id: '情书', rating_number: 224 },
      { id: '西雅图未眠夜', rating_number: 220 },
      { id:'迷幻公园', rating_number: 218 },
      { id: '头脑特工队', rating_number: 216 },
      { id: '奇异博士', rating_number: 211 },
      { id: '疯狂的石头', rating_number: 204 },
      { id: '温蒂妮', rating_number: 204 },
      { id: '时空恋旅人', rating_number: 203 },
      { id: '旺角卡门', rating_number: 202 },
      { id: '重返20岁', rating_number: 201 },
      { id: '湄公河行动', rating_number: 200 },
      { id: '僵尸古刹', rating_number: 198 }
    ];

    // 创建柱状图
    const ctx = document.getElementById('movieHotChart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: movieData.map(movie => ` ${movie.id}`),
        datasets: [{
          label: '评分数量',
          data: movieData.map(movie => movie.rating_number),
          backgroundColor: 'rgba(255,255,255,0.5)',
          borderColor: 'rgb(255,255,255)',
          borderWidth: 1
        }]
      },

      options: {
        scales: {
          x: {
          ticks: {
            color: 'white' // 设置横坐标文字颜色为黑色
          }
        },
          y: {
              ticks: {
            color: 'white' // 设置横坐标文字颜色为黑色
          },
            beginAtZero: true
          }
        },
        plugins: {
          title: {
            display: true,
            text: '电影热度分布图 - 前 20 部',
              {#fontColor: 'white',#}
              color:'white'
          }
        }

      }
    });
  </script>

  <style>
    .buttons {
      margin-bottom: 20px;
    }

    .buttons button {
      margin-right: 10px;
    }

  </style>
</body>
</html>
{% endblock %}